<template>
  <div
    class="CardDetail"
    @mouseenter="handleHover(true)"
    @mouseleave="handleHover(false)"
  >
    <div
      class="content"
      style="box-sizing: content-box"
      :style="{
        '--height': cardHeight + 'px',
        'padding-bottom': `${isShow ? '20px' : '0'}`,
        'margin-bottom': `${isShow ? computedHeight + 'px' : '0'}`,
      }"
    >
      <slot></slot>
    </div>
    <!-- v-show="isShow" -->
    <div
      class="hover-content"
      :style="{
        '--width': hoverWidth,
        '--height': computedHeight + 'px',
        'margin-top': `calc(${cardHeight}px + ${isShow ? '20px' : '0px'})`,
        'margin-left': `calc(${-index} * (${cardWidth} + ${gap}px))`,
      }"
    >
      <slot name="hover-content"></slot>
    </div>
  </div>
</template>
<script>
import animation from "@/scripts/animation.js";
export default {
  data() {
    return {
      isShow: false,
      hoverWidth: 0,
      cardWidth: 0,
      computedHeight: 0,
    };
  },
  props: {
    hoverHeight: {
      type: Number,
      default: 100,
    },
    cardHeight: {
      type: Number,
      default: 100,
    },
    gap: {
      type: Number,
      default: 30,
    },
    index: Number,
  },
  methods: {
    handleHover(isShow) {
      this.isShow = isShow;
      // 用animation函数和直接改变height都可以
      // 使用animation函数时需要把css中的transition注释
      if (isShow) {
        this.computedHeight = 0
        this.$el.offsetHeight
        this.computedHeight = this.hoverHeight
        // animation(300, 0, this.hoverHeight, (val) => {
        //   this.computedHeight = val;
        // });
      } else {
        this.computedHeight = this.hoverHeight
        this.$el.offsetHeight
        this.computedHeight = 0
        // animation(300, this.hoverHeight, 0, (val) => {
        //   this.computedHeight = val;
        // });
      }
    },
  },
  mounted() {
    this.hoverWidth = getComputedStyle(this.$el.parentElement).width;
    this.cardWidth = getComputedStyle(this.$el).width;
    this.$el.parentElement.style.position = "relative";
  },
};
</script>
<style lang="less" scoped>
.CardDetail {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  max-width: 100%;
  height: fit-content;
  filter: drop-shadow(2px 4px 6px black);
  & > .content {
    cursor: pointer;
    height: var(--height);
    width: 100%;
    background: #ccc;
    transition: margin .3s;
  }
  & > .hover-content {
    overflow: hidden;
    position: absolute;
    left: 0;
    height: var(--height);
    width: var(--width);
    display: block;
    background: #ccc;
    transition: height .3s;
  }
}
</style>
